body, html{
  height: 100%;
}
.content {
  position: relative;
  height: 100%;
  background-color: #f2f2f2;
  overflow: hidden;
  .yudi {
    position: absolute;
    opacity: 0;//初始雨滴透明,即不显示
    animation: drops 1s cubic-bezier(0.54, 0, 0.18, 0.34) infinite;
    width: 4px;
    height: 6px;
    background-color: #ccc;
    clip-path: ellipse(10% 30% at 50% 50%);
    //transform: scale(6); //估计是放作用
    //animation: drops 1s ease-in infinite;//添加 animation 动画名称, 执行时间, 时间函数, 无限播放
  }
}
@keyframes drops{
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(10px, 100vh, -10px);//坠落效果
  }
}